<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="libs/layui/css/layui.css">
    <link rel="stylesheet" href="libs/hint/hint.min.css">
    <link rel="stylesheet" href="dist/css/main.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin ext-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <span>layui 后台布局</span>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left" lay-filter="layout-nav-tools">
            <li class="layui-nav-item" lay-unselect lay-event="shrink">
                <a href="javascript:;" class="hint--bottom" aria-label="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect>
                <a href="http://www.layui.com" class="hint--bottom" target="_blank" aria-label="前台">
                    <i class="layui-icon layui-icon-website"></i>
                </a>
            </li>
            <li class="layui-nav-item" lay-unselect lay-event="refresh">
                <a href="javascript:;" class="hint--bottom" aria-label="刷新">
                    <i class="layui-icon layui-icon-refresh"></i>
                </a>
            </li>
            <!--<li class="layui-nav-item layui-hide-xs"><a href="">控制台</a></li>-->
            <!--<li class="layui-nav-item layui-hide-xs">-->
            <!--<a href="javascript:;">其它系统</a>-->
            <!--<dl class="layui-nav-child">-->
            <!--<dd><a href="">邮件管理</a></dd>-->
            <!--<dd><a href="">消息管理</a></dd>-->
            <!--<dd><a href="">授权管理</a></dd>-->
            <!--</dl>-->
            <!--</li>-->
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layout-nav-right">
            <li class="layui-nav-item" lay-unselect>
                <a lay-href="app/message/">
                    <i class="layui-icon layui-icon-notice"></i>
                    <!-- 如果有新消息，则显示小圆点 -->
                    <span class="layui-badge-dot"></span>
                    <span class="layui-badge-dot"></span>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-theme"></i>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-note"></i>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    hocgin
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-unselect lay-event="about">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <script>

    </script>

    <div class="layui-side layui-bg-black ext-layout-side">
        <div class="layui-side-scroll" id="VIEW_NAV">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <script id="TPL_NAV" type="text/html" template lay-url="./dist/store/menu.json">
                <ul class="layui-nav layui-nav-tree">
                    {{# layui.each(d, (i, result)=>{ }}
                    <li class="layui-nav-item">
                        <a href="{{result.jump}}" {{result.attr}}>
                            {{ result.icon }}
                            <cite>{{result.title}}</cite>
                        </a>
                        {{#
                        if ((result.list || []).length > 0) {
                        }}
                        <dl class="layui-nav-child">
                            {{#
                            layui.each(result.list, (i, result) => {
                            }}
                            <dd>
                                <a href="{{result.jump}}" {{result.attr}}>
                                    {{ result.icon }}
                                    <cite>{{result.title}}</cite>
                                </a>
                            </dd>
                            {{#
                            });}}
                        </dl>
                        {{#
                        }}}
                    </li>
                    {{# });}}
                </ul>
            </script>
        </div>
    </div>

    <!-- Body -->
    <div class="ext-page-tabs">
        <div class="layui-icon ext-tabs-control ext-tabs-control-prev"></div>
        <div class="layui-icon ext-tabs-control ext-tabs-control-next"></div>
        <div class="layui-icon ext-tabs-control ext-tabs-control-down">
            <ul class="layui-nav layout-tabs-select" lay-filter="tabs-option">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <span class="layui-nav-more"></span>
                    </a>
                    <dl class="layui-nav-child layui-anim-fadein layui-anim layui-anim-upbit">
                        <dd lay-event="closeThisTab"><a href="javascript:;;">关闭当前标签</a></dd>
                        <dd lay-event="closeOtherTab"><a href="javascript:;;">关闭其他标签</a></dd>
                        <dd lay-event="closeAllTab"><a href="javascript:;;">关闭所有标签</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="layout-tab-pages" lay-unauto>
            <ul class="layui-tab-title"></ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="layui-tab-content" lay-filter="layout-tab-pages"></div>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<script src="libs/layui/layui.js"></script>
<script>
    layui.config({
        debug: true,
        base: './dist/modules/'
    }).use('tabPage');
</script>
</body>
</html>